<template>
  <view class="contain">
    <view class="white-bg">
      <view class="title">
        您好！
        <text>欢迎进入世纪物流系统</text>
      </view>
      <!-- 主题内容部分之输入手机号 -->
      <view class="box-common ">
        <image src="../../static/iphone.png"></image>
        <input type="text" value="请输入手机号" />
      </view>
      <view class="box-common pwd">
        <image src="../../static/pwd.png"></image>
        <input type="text" value="请输入验证码" />
        <button class="btn-send">发送验证码</button>
      </view>
      <!-- 登录按钮 -->
       <navigator url="/pages/home/home" open-type="switchTab"><button class="btn-login">登 录</button></navigator>
       <!-- 免费注册 | 密码登录 -->
       <view class="tragle"><text>免费注册 | 密码登录</text></view>
       <!-- 请您阅读并同意  《隐私协议》 -->
       <view class="agreement">
          <label class="radio"><radio checked="true" />请您阅读并同意  《隐私协议》</label>
       </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    },
    // tabber的现实和隐藏
    onShow() {
    			uni.hideTabBar()
    		},
    onHide(){
         uni.showTabBar()
}
  }
</script>

<style lang="scss">
.contain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1334rpx;
  background: url(https://xmx-1306676270.cos.ap-beijing.myqcloud.com/bg.png) no-repeat;
  background-size: cover;
  padding-top: 170rpx;
  padding-left: 25rpx;
  box-sizing: border-box;
  
}
.white-bg {
  position: ralative;
  top: 166rpx;
  width: 700rpx;
  height: 886rpx;
  background-color:rgba(255,255,255,0.8);
  border-radius: 30rpx;
  
}
// 欢迎进入世纪物流系统
.title {
  text-align: center;
  color: #68a0f5;
  padding-top: 60rpx;
  padding-bottom: 80rpx;
  font-size: 25px;
  display: flex;
  flex-direction: column;
}
.title text {
  padding-top: 20rpx;
  font-size: 34rpx;
}
.box-common {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 600rpx;
  height: 65rpx;
  border-bottom: 2px solid #b1e0fa;
  padding-top: 20rpx;
  padding-left: 10rpx;
}
.pwd {
  margin-top: 110rpx;
}
.box-common image {
  width: 31rpx;
  height: 41rpx;
  vertical-align: middle;
}
.box-common input {
  padding-left: 20rpx;
  color: #b0dffb;
}
.btn-send {
  width: 180rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 25rpx;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
  background-color: #68a0f5;
}
.btn-login {
  width: 600rpx;
  height: 80rpx;
  color: #fff;
  border-radius: 80rpx;
  background-color: #68a0f5;
  line-height: 80rpx;
  margin-top: 280rpx;
}
.tragle {
  text-align: center;
  color: #0153dd;
  font-size: 30rpx;
  padding-top: 60rpx;
}
.agreement {
   display: flex;
   justify-content: center;
   padding-top: 30rpx;
   color: #8bc1ff;
   font-size: 26rpx;
   
}
radio {
  width: 30rpx;
  height: 30rpx;
  margin-right: 40rpx;
}
</style>
